<template>
  <div class="form-text">
    <input
      type="text"
      :value="value.link"
      @compositionstart="compositionstart"
      @compositionend="compositionend"
      @input="input"
      :placeholder="placeholder"
      :id="`form_${field.fieldName}`" 
      autocomplete="off"/>
  </div>
</template>

<script>
import FormMixin from '@src/component/form/mixin/form';

export default {
  name: 'form-link',
  mixins: [FormMixin],
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 是否是输入中文
      $isInputZh: false,
    }
  },
  methods: {
    /* 输入文字之前 */
    compositionstart(event) {
      this.$data.$isInputZh = true;
    },
    /* 输入文字之后 */
    compositionend(event) {
      this.$data.$isInputZh = false;
      this.input(event);
    },
    // inputEvent(event) {
    //   // 如果是在中文输入 return
    //   // if(this.$data.$isInputZh) return
    //
    //   console.log('event', event);
    //   const newValue = {
    //     label: '',
    //     link: event.data
    //   }
    //
    //   this.input(event);
    //   this.$emit('update', {
    //     newValue,
    //     oldValue: {},
    //     field: this.field
    //   });
    //   this.$emit('input', newValue);
    //
    // },
    input(event){
      console.log('event', event);

      const newValue = {
        label: '',
        link: event.target.value
      }

      let oldValue = null;

      this.$emit('update', {newValue, oldValue, field: this.field});
      this.$emit('input', newValue);
    }
  },
}
</script>

<style lang="scss">
.form-text{
  width: 100%;

  input{
    width: 100%;
  }
}
</style>
